<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    // 传统的对象数据  键名都是字符串类型  => 如果用其他类型作为键名 => 会隐式转化为字符串!!!!

    // var list = [1, 4, 7, 2, 5, 8];
    // list["0"]   =>  list[0]
    // for (var i in list) {
    //     console.log(i);
    // }


    var zhang = {
        // name: "张三",
        // age: 18,
        // height: "177cm",
        // weight: "70kg",
    }

    zhang.num = 1;  // zhang["num"]

    zhang[100] = 200;
    zhang["hello"] = "world";
    zhang[true] = false;
    zhang[null] = undefined;

    var arr = [1, 2, 3];
    var obj = { a: 1, b: 2 }
    zhang[arr] = arr;
    zhang[obj] = obj;

    // console.log(zhang);

    // for (var key in zhang) {
    //     console.log(key);
    // }

    // 数组转字符串
    // console.log(arr.toString());  // "1,2,3"  将数组中的元素用逗号分隔

    // 对象转字符串
    // console.log(obj.toString());  // "[object Object]"
</script>
<script>
    // Map  ES6新增数据结构(类似对象)
    // 为了解决这个问题，ES6 提供了 Map 数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。也就是说，Object 结构提供了“字符串—值”的对应，Map 结构提供了“值—值”的对应，是一种更完善的 Hash 结构实现。如果你需要“键值对”的数据结构，Map 比 Object 更合适。

    // 如何创建Map数据结构?   => 构造函数创建
    var m = new Map();
    console.log(m);


    // Map数据结构的属性和方法
    // 属性:
    // size  返回map数据结构成员的个数(数据的条数)

    // 方法:
    // set(key,val)   对应键名设置键值(没有就新增 有就修改)  => 返回值:原map数据本身,影响原map数据
    // get(key)       对应键名获取键值  => 有就返回键值 没有就返回undefined
    // delete(key)    对应键名删除键值(单删)  => 删除成功返回true 失败=>false
    // clear()        清除Map数据结构所有成员(所有数据)  -> 返回值: undefined
    // has(key)       判断Map数据中是否存在对应键名的数据
    // forEach(function(val,key,map){})  map遍历

    // var res = m.set(100, 200);
    // console.log("返回值:", res);
    // console.log("原Map数据:", m);

    var arr = [1, 2, 3];
    var obj = { a: 1, b: 2 };

    // 一条一条设置
    m.set(100, 200)
    m.set("hello", "world")
    m.set(true, false)
    m.set(null, undefined)
    m.set(arr, arr)
    m.set(obj, obj);
    console.log(m);

    // 链式操作:  (原理: 方法的返回值还是同种类型的数据(原本的/新的),后续可以继续调用)   
    // [{key:100,value:200},{key:"hello",value:"world"}]  (数组对象 => 键名键值 都作为对象的键值存储)
    m.set(100, 200).set("hello", "world").set(true, false).set(null, undefined).set(arr, arr).set(obj, obj);


    // 获取
    // console.log(m.get(100));
    // console.log(m.get("hello"));
    // console.log(m.get(true));
    // console.log(m.get(null));
    // console.log(m.get(arr));
    // console.log(m.get(obj));
    // console.log(m.get("abc"));

    // 判断
    // console.log(m.has(100));
    // console.log(m.has("hello"));
    // console.log(m.has(true));
    // console.log(m.has(null));
    // console.log(m.has(arr));
    // console.log(m.has(obj));
    // console.log(m.has("abc"));  // true


    // 单删
    // console.log(m.delete(100));
    // console.log(m.delete("hello"));
    // console.log(m.delete(true));
    // console.log(m.delete(null));
    // console.log(m.delete(arr));
    // console.log(m.delete(obj));
    // console.log(m.delete("abc"));  // true

    // clear
    // console.log(m.clear());
    // console.log(m);


    // forEach
    m.forEach(function (val, key, map) {
        console.log(key, val);
    })















</script>

</html>